<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../org/jquery.min.js"></script>
    <script src="../org/angular.min.js"></script>
</head>
<body>

<div ng-app="hd">
    <div ng-controller="ctrl">
        <input type="text" ng-model="name">
        <h1 hd-cms hd-color="name"></h1>
    </div>

</div>


<script>

    var m = angular.module('hd', []);
    m.directive('hdCms', function () {
       //构建指令代码
        return {
            restrict: 'EA', //指生成指令在页面中的表现形式: A 是指attr  E 是指element C 是指class，不建议使用C
            template: '{{color}}<span style="color:{{color}}">后盾人！！！</span><br/><input ng-model="color">',
            scope: {color:'=hdColor'} //=修饰为双向文本绑定，即将hd-color所指定的值赋值给template中color
        }
    });

    m.controller('ctrl', ['$scope', function ($scope) {
        $scope.name = 'red';
    }]);

</script>

</body>
</html>

